<template>
  <div class="home-footer">
    <div class="container-fluid">
      <div class="container data-container">
        <div class="current-data">
          <img
            class="data-img"
            src="~@/assets/img/home/Project-icon@2x.png"
            alt=""
          />
          <p class="data">{{ showProject }}</p>
          <p class="data-name">Project number</p>
        </div>
        <div class="current-data">
          <img
            class="data-img"
            src="~@/assets/img/home/Member-icon@2x.png"
            alt=""
          />
          <p class="data">
            {{
              // @ts-ignore
              $filter(showMember)
            }}
          </p>
          <p class="data-name">Member number</p>
        </div>
        <div class="current-data">
          <img
            class="data-img"
            src="@/assets/img/home/company-icon@2x.png"
            alt=""
          />
          <p class="data">{{ showCompany }}</p>
          <p class="data-name">Company number</p>
        </div>
      </div>

      <div class="container-fluid p-0">
        <div class="container service-container">
          <div class="service-title">
            <div class="service h1">Service</div>
            <span class="sentence"
              >We've got everthing you need to start trading
            </span>
          </div>

          <div class="service-card-list">
            <div class="service-card">
              <img
                class="img-card"
                src="~@/assets/img/home/service1.png"
                alt=""
              />
              <div class="title-card">Focus on process</div>
              <p class="detail-card">
                Influenced by the idea of ERP process automation, traditional
                investment management software mainly emphasizes the automation
                of investment process,and internal and external cooperation and
                communication is a very important dimension of their work.
              </p>
            </div>
            <div class="service-card">
              <img
                class="img-card"
                src="~@/assets/img/home/service2.png"
                alt=""
              />
              <div class="title-card">PEPM relationships</div>
              <p class="detail-card">
                We believe that the success of the investment team largely
                depends on the ability of the investment staff to organize
                resources, communicate and collaborate internally and
                externally. With the technical support of social network, PEPM
                puts internal colleagues
              </p>
            </div>
            <div class="service-card">
              <img
                class="img-card"
                src="~@/assets/img/home/service1.png"
                alt=""
              />
              <div class="title-card">Focus on process</div>
              <p class="detail-card">
                Influenced by the idea of ERP process automation, traditional
                investment management software mainly emphasizes the automation
                of investment process,and internal and external cooperation and
                communication is a very important dimension of their work.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const projectNum = 64
const memberNum = 1230
const companyNum = 630

let showProject = ref(0)
let showMember = ref(0)
let showCompany = ref(0)

// 初始数据 64， 1230， 630 根据600 计算
// 20 1 2
const listerer = () => {
  if (showProject.value < projectNum)
    lister(showProject, projectNum, computedTime(projectNum))
  if (showMember.value < projectNum)
    lister(showMember, memberNum, computedTime(memberNum))
  if (showCompany.value < projectNum)
    lister(showCompany, companyNum, computedTime(companyNum))
}
const lister = (num: any, stop: number, time: number) => {
  const timer = setInterval(() => {
    num.value++
    if (num.value >= stop) clearInterval(timer)
  }, time)
}
// 计算tiem
const computedTime = (num: number) => {
  const res = num / 600
  return res <= 1 ? 200 : res >= 2 ? 10 : 20
}

listerer()
</script>

<style scoped lang="less">
.home-footer {
  width: 100%;
  height: 100%;
  background-color: #0e0e12;
  padding-bottom: 71px;

  .data-container {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-top: 100px;

    .current-data {
      padding-top: 30px;
      flex: 33%;
      text-align: center;
      margin-bottom: 20px;
      transition: all 0.6s;
      .data-img {
        width: 63px;
        height: 70px;
      }

      .data {
        font-size: 60px;
        font-weight: 600;
        color: #fff;
      }

      .data-name {
        color: #fff;
        font-size: 30px;
      }
    }

    .current-data:hover {
      background-color: rgba(58, 55, 55, 0.2);
      border-radius: 20px;
    }
  }

  .service-container {
    text-align: center;

    .service-title {
      margin-bottom: 54px;
    }

    .service {
      margin-top: 80px;
      color: #fff;
    }

    .sentence {
      color: #707070;
    }

    .service-card-list {
      display: flex;
      justify-content: space-between;

      .service-card {
        width: 476px;
        height: 614px;
        background-color: #1c1c24;
        border-radius: 20px;
        margin-right: 33px;
        box-sizing: border-box;
        padding: 74px 29px 58px 32px;

        .img-card {
          width: 150px;
          height: 150px;
        }

        .title-card {
          font-size: 32px;
          margin-top: 83px;
          margin-bottom: 25px;
          color: #fff;
        }

        .detail-card {
          color: #707070;
          font-size: 18px;
        }
      }
    }
  }
}

@media screen and(max-width: 1400px) {
  .home-footer {
    .service-container {
      .service-card-list {
        .service-card {
          .detail-card {
            font-size: 14px;
          }
        }
      }
    }
  }
}

@media screen and(max-width: 1200px) {
  .home-footer {
    .data-container {
      padding: 0px;
      padding-top: 23px;

      .current-data {
        .data {
          margin-top: 14px;
          margin-bottom: 19px;
          font-size: 30px;
          font-weight: 400;
          color: #fff;
        }

        .data-name {
          color: #fff;
          font-size: 18px;
        }
      }
    }

    .service-container {
      padding: 0;

      .service-title {
        margin-bottom: 27px;

        .service {
          margin-top: 0px;
          color: #fff;
        }

        .sentence {
          font-size: 13px;
        }
      }

      .service-card-list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        .service-card {
          width: 382px;
          height: 242px;
          padding: 10px;
          background-color: #1c1c24;
          border-radius: 20px;
          margin-right: 0;
          margin-bottom: 13px;
          box-sizing: border-box;
          flex: 100%;

          .img-card {
            width: 60px;
            height: 60px;
          }

          .title-card {
            margin: 13px 0;
            font-size: 18px;
            color: #fff;
          }

          .detail-card {
            color: #707070;
            font-size: 12px;
          }
        }
      }
    }
  }
}

.p-0 {
  padding: 0;
}
</style>
